<template>
	<view class="page flex-col">

		<view class="block_1 flex-col">
			<view class="list_2 flex-col">
				<view class="list-items_1 flex-row flex at" v-for="(item, index) in goodslist" :key="index"
					@click="toDetail(item.id)">
					<view class="box_2 flex-col">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="text-wrapper_5 flex-col justify-between">
						<text class="text_6">{{item.title}}</text>
						<text class="text_7">{{item.subtitle}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
	</view>
</template>
<script>
	export default {
		props: ['goodslist'],
		watch: {
			goodslist(e) {
				console.log(e, 'goods')
				this.goods = e
			}
		},
		data() {
			return {
				goodslist: {},
			};
		},
		methods: {
			toDetail(id) {
				console.log(id)
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						id: id
					}
				});
			}
		},
	};
</script>
<style scoped>
	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
	}

	.box_1 {
		background-color: rgba(255, 255, 255, 1);
		width: 750rpx;
		height: 1624rpx;
	}

	.group_1 {
		background-color: rgba(255, 255, 255, 1);
		height: 176rpx;
		width: 750rpx;
	}

	.box_3 {
		width: 679rpx;
		height: 42rpx;
		margin: 24rpx 0 0 35rpx;
	}

	.text_1 {
		width: 108rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(47, 95, 220, 1);
		font-size: 30rpx;
		letter-spacing: -0.6000000238418579rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.label_1 {
		width: 34rpx;
		height: 21rpx;
		margin: 10rpx 0 0 437rpx;
	}

	.label_2 {
		width: 31rpx;
		height: 22rpx;
		margin: 10rpx 0 0 10rpx;
	}

	.label_3 {
		width: 49rpx;
		height: 24rpx;
		margin: 9rpx 0 0 10rpx;
	}

	.box_4 {
		width: 690rpx;
		height: 64rpx;
		margin: 34rpx 0 12rpx 30rpx;
	}

	.image_1 {
		width: 18rpx;
		height: 32rpx;
		margin-top: 14rpx;
	}

	.text_2 {
		width: 144rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 5rpx 0 0 255rpx;
	}

	.image_2 {
		width: 174rpx;
		height: 64rpx;
		margin-left: 99rpx;
	}

	.block_1 {
		width: 750rpx;
		height: 1381rpx;
	}

	.group_3 {
		background-color: rgba(247, 247, 247, 1);
		width: 750rpx;
		height: 10rpx;
	}

	.text-wrapper_4 {
		width: 602rpx;
		height: 40rpx;
		margin: 30rpx 0 0 74rpx;
	}

	.text_3 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_4 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 133rpx;
	}

	.text_5 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(237, 134, 31, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 133rpx;
	}

	.group_4 {
		background-color: rgba(237, 134, 31, 1);
		border-radius: 2rpx;
		width: 66rpx;
		height: 4rpx;
		margin: 12rpx 0 0 587rpx;
	}

	.list_2 {
		width: 690rpx;
		height: 812rpx;
		justify-content: space-between;
		margin: 30rpx 0 0 30rpx;
	}

	.list-items_1 {
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		width: 690rpx;
		height: 182rpx;
		margin-bottom: 28rpx;
	}

	.box_2 {

		margin: 16rpx 0 0 16rpx;

	}

	.box_2 image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 18rpx;
	}

	.text-wrapper_5 {
		width: 408rpx;
		height: 101rpx;
		margin: 34rpx 32rpx 0 24rpx;
	}

	.text_6 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_7 {
		width: 408rpx;
		height: 33rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 33rpx;
		margin-top: 28rpx;
		display: block;
	}

	.text-wrapper_3 {
		height: 86rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8cdb0dae03e0ca58685ed57feb0fc22cd1027157d8cd56d06429e6395015cfa2) 100% no-repeat;
		background-size: 100% 100%;
		width: 690rpx;
		margin: 232rpx 0 125rpx 30rpx;
	}

	.text_8 {
		width: 120rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
		margin: 22rpx 0 0 285rpx;
	}

	.image_3 {
		width: 750rpx;
		height: 68rpx;
		margin-top: -1rpx;
	}
</style>